<template>
  <view class="h_body">
    <view class="bank_header">
      <view class="search">
        <nut-input v-model="search" placeholder="" type="text" />
        <Search></Search>
      </view>
    </view>
    <nut-radio-group v-model="radioVal">

      <view class="h_card bank_list" v-for="(item,index) in list" :key="index" @click="chooseBank(item)">
        <view class="top">
          <view class="left">
            <image src="@/assets/images/index/icon_yinlian.png"></image>
            <view class="text_block">
              <view class="tops">{{item.bankName}}</view>
              <view class="topss">{{ item.accountName }}</view>
            </view>
          </view>
          <view class="right">
            <view class="ssss">{{item.bankNo}}</view>
            <view class="sss">个人账户</view>
          </view>

        </view>
        <view class="bottom">
          <view class="bank_left"><nut-radio label="3">设为默认选项</nut-radio></view>
          <view class="bank_right">
            <view>编辑</view>
            <Del style="margin-right:24rpx"></Del>
            <view>删除</view>
            <Edit></Edit>
          </view>
        </view>
      </view>
    </nut-radio-group>
  </view>
</template>
<script lang="ts" setup>
import { Del, Edit } from "@nutui/icons-vue-taro";
import Taro, { useDidShow } from "@tarojs/taro";
import { ref } from "vue";
import { accountList,AccountDateParams } from "@/@api";
import useUserInfoStore from "@/store/user";
import useSendGoodsStore from "@/store/sendGoods";
const sendGoodsStore = useSendGoodsStore();
const search = ref<string>("");
const radioVal = ref<string>("");
const userStore = useUserInfoStore();
const list = ref<AccountDateParams[]>([])
useDidShow(async ()=>{
  list.value = await accountList({
        customerCode:userStore.userInfo.customerCode,
        accountName: "",
        phone: "",
        accountNo: "",
    })
})
function chooseBank(item:AccountDateParams){
    sendGoodsStore.returunAccount = item.bankNo
    Taro.navigateBack()
}

</script>
<style lang="scss">
.bank_header {
  width: 100%;
  height: 96rpx;
  padding: 12rpx 24rpx;
  box-sizing: border-box;
  background-color: white;
  .search {
    width: 702rpx;
    height: 72rpx;
    border-radius: 200rpx;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    box-sizing: border-box;
    .nut-input--border {
      border: unset;
    }
    .nut-input {
      background-color: unset;
      padding: 0;
    }
    .nut-input-value {
      display: flex;
      align-items: center;
    }
  }
}
.bank_list {
  margin-top: 24rpx;
  height: 224rpx;
  .top {
    width: 100%;
    height: 144rpx;
    /* 渐变浅蓝 */
    background: linear-gradient(108deg, #cce0ff 0%, #ffffff 100%);
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    box-sizing: border-box;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      image {
        width: 76rpx;
        height: 76rpx;
        margin-right: 24rpx;
      }
      .text_block {
        height: 76rpx;
        .tops {
          font-family: PingFang SC;
          font-size: 28rpx;
          color: #252525;
          font-weight: 700;
        }
        .topss {
          font-family: PingFang SC Medium;
          font-size: 24rpx;
          color: #252525;
        }
      }
    }
    .right {
      height: 76rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      .ssss {
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #252525;
      }
      .sss {
        width: 112rpx;
        height: 36rpx;
        border-radius: 20rpx;
        font-family: PingFang SC;
        font-size: 22rpx;

        /* 主蓝 */
        color: #0966ff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(9, 102, 255, 0.16);
      }
    }
  }
  .bottom {
    width: 100%;
    height: 80rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bank_right {
      display: flex;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      color: #666666;
    }
  }
}
</style>
